// +----------------------------------------------------------------------
// | LikeShop100%开源免费商用电商系统
// +----------------------------------------------------------------------
// | 欢迎阅读学习系统程序代码，建议反馈是我们前进的动力
// | 开源版本可自由商用，可去除界面版权logo
// | 商业版本务必购买商业授权，以免引起法律纠纷
// | 禁止对系统程序代码以任何目的，任何形式的再发布
// | Gitee下载：https://gitee.com/likemarket/likeshopv2
// | 访问官网：https://www.likemarket.net
// | 访问社区：https://home.likemarket.net
// | 访问手册：http://doc.likemarket.net
// | 微信公众号：好象科技
// | 好象科技开发团队 版权所有 拥有最终解释权
// +----------------------------------------------------------------------
// | Author: LikeShopTeam
// +----------------------------------------------------------------------

<template>
	<view>
		<view class="order-list">
			<navigator v-for="(item, index) in orderList" :key="index" hover-class="none" class="order-item bg-white mt20" >
				<view class="order-header row-between">
					<view class="row">
						<view v-if="item.goods_type == 10" class="mr10">
							<u-tag text="实物商品" size="mini" type="primary" mode="plain" />
						</view>
						<view v-if="item.goods_type == 20" class="mr10">
							<u-tag text="虚拟商品" size="mini" type="primary" mode="plain" />
						</view>

						订单编号：{{item.order_no}}
					</view>
					<view :class="item.status == 20 ? 'muted' : 'primary'">{{getOrderStatus(item.status)}}</view>
				</view>
				<view class="order-con">
					<scores-order-goods :list="item"></scores-order-goods>
					<view class="all-price row-end">
						<text class="muted xs">共1件商品，总积分：</text>
						<price-format :subscript-size="30" :first-size="30" :second-size="30" :price="item.score"></price-format>
					</view>
          <view class="all-price row-end" >
            <text class="muted xs">下单时间：{{item.create_time}}</text>
          </view>
          <view class="all-price row-end" v-if="item.wl_order_sn">
            <text class="muted xs">快递单号：{{item.wl_order_sn}}</text>
            <text class="muted xs">发货时间：{{item.send_time}}</text>
          </view>

          <view class="all-price row-end" v-if="item.confirm_take_time">
            <text class="muted xs">完成时间：{{item.confirm_take_time}}</text>
          </view>
				</view>
				<view class="order-footer row"  >
					<view v-if="item.status==20&&item.goods_type==10" class="ml20">
						<button size="sm" class="btn plain br60 primary red" hover-class="none" @tap.stop="comfirmOrder(item.id)">确认收货</button>
					</view>
				  <view v-if="item.status==20&&item.goods_type==20" class="ml20">
					<button size="sm" class="btn plain br60 primary red" hover-class="none" @tap.stop="qcodeShop(item.order_no)">核销订单</button>
				  </view>
				</view>
			</navigator>
			<loading-footer :status="status" :slot-empty="true" @refresh="reload">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" :src="imgUrl+'images/goods_null.png'"></image>
					<text class="lighter">暂无订单</text>
				</view>
			</loading-footer>
		</view>
		<score-order-dialog ref="orderDialog" :order-id="orderId" :type="type" @refresh="reflesh"></score-order-dialog>

    <u-popup ref="popup" background-color="#fff" v-model="showPopup" mode="center">
      <view class="qr-code-popup">
        <view class="popup-header">
          <text class="popup-title">核销二维码</text>
        </view>
        <view class="popup-qrcode">
          <uqrcode 
            ref="uQRCode" 
            :canvas-id="qrCodeCanvasId"
            :value="qrCodeText" 
            :size="size" 
            :margin="margin" 
            :background-color="backgroundColor" 
            :foreground-color="foregroundColor" 
            :type-number="typeNumber" 
            :file-type="fileType" />
        </view>
        <view class="popup-footer">
          <button class="close-btn" @click="closeQrCode">关闭</button>
        </view>
      </view>
    </u-popup>

	</view>
</template>


<script>
	import {
		getOrderList,
	} from '@/api/scoregoods';

	import {
		loadingType
	} from '@/utils/type';

	import {
		loadingFun
	} from '@/utils/tools'
  import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'

	export default {
		components: {
      uQRCode
    },
		data() {
			return {
				page: 1,
        showPopup: false, // 控制弹窗显示，修改为 false 避免默认打开
        qrCodeText: '', // 二维码文本内容
        qrCodeCanvasId: 'qrcode-canvas', // 二维码canvasId
        size: 200,
        margin: 10,
        backgroundColor: '#FFFFFF',
        foregroundColor: '#000000',
        typeNumber: -1,
        fileType: 'png',
				orderList: [],
				status: loadingType.LOADING,
				showCancel: false,
				type: 0,
				orderId: "",
				showLoading: false
			};
		},

		props: {
			orderType: {
				type: String
			}
		},
		created: function() {
			uni.$on("refreshorder", () => {
				this.reflesh()
			})
		},
		beforeMount: function() {
			this.getOrderListFun();
		},
		destroyed: function() {
			uni.$off("refreshorder")
		},
		methods: {
			reflesh() {
				this.page = 1
				this.orderList = []
				this.status = loadingType.LOADING
				this.type = 0
				this.getOrderListFun();
			},

			reload() {
				this.status = loadingType.LOADING
				this.getOrderListFun();
			},

			orderDialog() {
				this.$refs.orderDialog.open()
			},

			delOrder(id) {
				this.orderId = id
				this.type = 1
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			comfirmOrder(id) {
				this.orderId = id
				this.type = 2
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			cancelOrder(id) {
				this.orderId = id
				this.type = 0
				this.$nextTick(() => {
					this.orderDialog();
				});
			},

			async getOrderListFun() {
				let {
					page,
					orderType,
					orderList,
					status
				} = this;
				
				console.log(orderType,566)
				const data = await loadingFun(getOrderList, page, orderList, status, {
					type: orderType
				})
				if (!data) return
				this.page = data.page
				this.orderList = data.dataList
				this.status = data.status
			},
      
      // 核销订单按钮点击事件
      qcodeShop(orderNo){
        // 生成唯一的canvasId
        this.qrCodeCanvasId = 'qrcode-canvas-' + new Date().getTime();
        this.qrCodeText = orderNo;
        console.log('显示二维码:', this.qrCodeText);
        
        // 显示弹窗
        this.showPopup = true;
        
        // 使用 nextTick 确保 DOM 更新后生成二维码
        this.$nextTick(() => {
          // 调用 uQRCode 组件的 makeQRCode 方法生成二维码
          if (this.$refs.uQRCode) {
            this.$refs.uQRCode.makeQRCode();
          }
        });
      },
      
      // 关闭二维码弹窗
      closeQrCode() {
        this.showPopup = false;
        this.qrCodeText = '';
        // 重置canvasId以确保下次能正确生成
        this.qrCodeCanvasId = 'qrcode-canvas';
      },
      
			goPage(url) {
				uni.navigateTo({
					url
				})
			}
		},
		computed: {
			getOrderStatus() {
				return (status) => {
					let text = ''
					switch (status) {
						case 10:
							text = '待发货';
							break;
						case 20:
							text = '待收货/待核销';
							break;
						case 30:
							text = '已完成/已核销';
							break;
					}
					return text
				}
			},
			getCancelTime() {
				return (time) => time - Date.now()/1000
			}
		}
	};
</script>
<style lang="scss">
	.order-list {
		min-height: calc(100vh - 80rpx);
		padding: 0 20rpx;
		overflow: hidden;

		.order-item {
			border-radius: 10rpx;

			.order-header {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px dotted #E5E5E5;
			}

			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				height: 100rpx;
				border-top: $-solid-border;
				padding: 0 24rpx;

				.plain {
					border: 1px solid #BBBBBB;

					&.red {
						border-color: $-color-primary;
					}
				}
				
				.btn {
					line-height: 62rpx;
					height: 62rpx;
					font-size: 28rpx;
					padding: 0 30rpx;
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
.qr-code-popup {
  width: 500rpx;
  padding: 20rpx;
  text-align: center;
  background: #fff;
  border-radius: 10rpx;

  .popup-header {
    margin-bottom: 20rpx;
    
    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }
  
  .popup-qrcode {
    display: flex;
    justify-content: center;
    padding: 20rpx 0;
  }
  
  .popup-footer {
    padding: 20rpx 0 10rpx;
    
    .close-btn {
      width: 80%;
      margin:0 auto;
      height: 36px;
      background-color: #007AFF;
      color: white;
      border-radius: 6px;
      border: none;
    }
  }
}
</style>
